<template>
  <pageSkeleton v-if="props.loading"  />

  <template v-else>
    <div class="container">
      <div class="avartar">
        <van-image
          round
          width="10rem"
          height="10rem"
          fit="cover"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="username">
        {{ props.userInfo.username }}
      </div>
      <div class="desc">
        {{
          props.userInfo.profile === null
            ? '这个人很懒，还没有个人简介'
            : props.userInfo.profile
        }}
      </div>
      <div class="tags">
        <van-tag
          type="primary"
          size="large"
          class="space-8"
          v-for="item in props.userInfo.tags"
          >{{ item }}</van-tag
        >
      </div>
    </div>
    <div class="d-btn">
      <van-button type="info" block round @click="$emit('inviteTeammate')">邀请组队</van-button>
    </div>
    <div class="d-btn">
      <van-button type="primary" block round @click="$emit('againMatch')">换一换</van-button>
    </div>
  </template>
</template>
<script setup>
import { ref } from 'vue'
import pageSkeleton from './skeleton.vue'
const props = defineProps({
  userInfo: {},
  loading: false,
})
</script>
<style scoped>
.container {
  text-align: center;
  font-size: 20px;
  background-color: #f4f7f9;
  padding: 40px 0;
  margin: 0 16px;
  border-radius: 10px;
}
.desc {
  font-size: 16px;
  color: #c5c5c5;
}
.d-btn {
  padding: 16px 16px 0 16px;
}
.space-8 {
  margin-right: 8px;
}
</style>
